<template>
<div class="doodle-wrapper">
    <css-doodle use="var(--rule)"></css-doodle>
</div>
</template>
<script setup name="MyCssDoodle">
import { onMounted } from 'vue';
import 'css-doodle';


onMounted(() => {
	const doodle = document.querySelector('css-doodle');
	document.querySelector('.doodle-wrapper').addEventListener('click', (event) => {
		event.stopPropagation();
		doodle.update();
	})
})
</script>
<style scoped>
    .doodle-wrapper{
        position: relative;
        margin: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;
        /* animation: change 10s linear infinite; */
    }
    @keyframes change {
		10% {
		    filter: hue-rotate(360deg);
		}
	}
    css-doodle {
		--hue: calc(180 + 1.5 * @x * @y);
        --rule: (
			@grid: 18 / 100vmax / #0a0c27;
			background: hsl(var(--hue), 50%, 70%);
			margin: -.5px;
			transition: @r(.5s) ease;
			clip-path: polygon(@p(
			'0 0, 100% 0, 100% 100%',
			'0 0, 100% 0, 0 100%',
			'0 0, 100% 100%, 0 100%',
			'100% 0, 100% 100%, 0 100%'
			));
        );
    /* 粒子效果
	css-doodle {
        --rule: (
            :doodle {
		        @size: 100vw 100vh;
		        perspective: 10px;
		    }
		    :container {
		        perspective: 50px;
		        transform-style: preserve-3d;
		    }
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 4px;
		    height: 4px;
		    border-radius: 50%;
		    left: 50%;
		    top: 50%;
		    background: hsl(@rn(1, 255, 3), @rn(10%, 90%), @rn(10%, 90%));
		    transform: scale(@rn(1, 20, 3)) translate3d(@rn(-50, 100, 3)vw, @rn(-50, 50, 3)vh, @rn(-100, 20)px);
		    animation: move @rn(5, 15, 3)s infinite @rn(-20, -10, 3)s linear alternate;
		    box-shadow: 0 0 1px #fff, 0 0 5px #fff;
		    @keyframes move {
		        100% {
		            margin-top: 500px;
		        }
		    }
        ); */
    }
</style>